<!DOCTYPE html>
<html>
<head>
    <link href="" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <title>聊天室</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="/chat/css/base.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/chat/js/swfobject.js"></script>
    <script type="text/javascript" src="/chat/js/web_socket.js"></script>
    <script type="text/javascript" src="/chat/js/jquery.min.js"></script>
    <script type="text/javascript">
        if (typeof console == "undefined") {
            this.console = {
                log: function (msg) {
                }
            };
        }
        // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
        WEB_SOCKET_SWF_LOCATION = "/chat/swf/WebSocketMain.swf";
        // 开启flash的websocket debug
        WEB_SOCKET_DEBUG = true;
        var ws, name, client_list = {};

        // 连接服务端
        function connect() {
            window.localStorage.clear();
            // 创建websocket
            ws = new WebSocket("ws://" + document.domain + ":7272");
            // 当socket连接打开时，输入用户名
            ws.onopen = onopen;
            // 当有消息时根据消息类型显示不同信息
            ws.onmessage = onmessage;
            ws.onclose = function () {
                console.log("连接关闭，定时重连");
                connect();
            };
            ws.onerror = function () {
                console.log("出现错误");
            };
        }

        // 连接建立时发送登录信息
        function onopen() {
            // 登录
            var login_data = '{"type":"login","room_id":"{$room_id}","openid":"{$user[\'openid\']}","nickname":"{$user[\'nickname\']}","headimgurl":"{$user[\'headimgurl\']}","sex":"{$user[\'sex\']}"}';
            //console.log("websocket握手成功，发送登录数据:" + login_data);
            ws.send(login_data);
        }

        // 服务端发来消息时
        function onmessage(e) {
            //console.log(e);
            var data = eval("(" + e.data + ")");
            console.log(data);
            switch (data['type']) {
                // 服务端ping客户端
                case 'ping':
                    ws.send('{"type":"pong"}');
                    break;
                // 登录 更新用户列表
                case 'login':
                    sysmsg(data['nickname'] + ' 进入');
                    if (!window.localStorage.uid) {
                        window.localStorage.uid = data['client_id'];
                    }
                    break;
                // 发言
                case 'say':
                    if (data['from_client_id'] == window.localStorage.uid) {
                        sentmsg(data['headimgurl'], data['content']);
                    } else {
                        getmsg(data['headimgurl'], data['nickname'], data['content'])
                    }
                    break;
                // 用户退出 更新用户列表
                case 'logout':
                    sysmsg(data['nickname'] + ' 离开');
                    delete client_list[data['from_client_id']];
            }
            //console.log(window.localStorage.uid)
        }

        // 提交对话
        function onSubmit() {
            var input = document.getElementById("textarea");
            var to_client_id = 'all';
            var to_client_name = "所有人";
            ws.send('{"type":"say","to_client_id":"' + to_client_id + '","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '","openid":"{$user[\'openid\']}","nickname":"{$user[\'nickname\']}","headimgurl":"{$user[\'headimgurl\']}","sex":"{$user[\'sex\']}"}');
            input.value = "";
            input.focus();
        }


        // 发言
        function sentmsg(headimgurl, content) {
            var html = '<div class="xb_conversation_item">'
                    + '  <div class="xb_conv_wrap_right">'
                    + '      <img class="xb_avatar_right" src="'+ headimgurl + '">'
                    + '      <div class="xb_tri_right"></div>'
                    + '      <div class="xb_tri_right1"></div>'
                    + '      <div class="xb_conv_right">'+ content + '</div>'
                    + '  </div>'
                    + '</div>';
            $(".main").append(html);
        }

        //接收
        function getmsg(headimgurl, nickname, content) {
            var html = '<div class="xb_conversation_item">'
                    + '   <div class="xb_conv_wrap_left">'
                    + '      <img class="xb_avatar_left" src="' + headimgurl + '">'
                    + '      <div class="xb_tri_left"></div>'
                    + '      <div class="xb_tri_left1"></div>'
                    + '      <div class="xb_name_left">' + nickname + '</div>'
                    + '      <div class="xb_conv_left">' + content + '</div>'
                    + '  </div>'
                    + '</div>';
            $(".main").append(html);
        }

        //系统消息
        function sysmsg(content) {
            var html = '<div class="time">'
                    + '<span class="groupinfo radioBox"><span class="cont">' + content + '</span></span>'
                    + '</div>';
            $(".main").append(html);
        }
    </script>
</head>
<body onload="connect();">
<div class="main"></div>
<div style="height: 60px;"></div>
<div class="send">
    <form onsubmit="onSubmit(); return false;">
        <textarea id="textarea"></textarea>
        <input id="btn" type="submit" value="发送">
    </form>
</div>
</body>
</html>